<template>
	<view class="report-progress-container">
		<CustomNavBar title="举报进度">
			<template v-slot:left>
				<view class="back uni-flex uni-align-center uni-justify-center" @click="goBack">
					<uni-icons type="left" size="20"></uni-icons>
				</view>
			</template>
		</CustomNavBar>
		<!-- 举报通过状态展示 -->
		<view class="pass-status">
			<image :src="`${$ImgBaseUrl}ReportPassed-icon.png`" mode="" class="pass-icon"></image>
			<text class="pass-text">举报通过</text>
		</view>
		<!-- 进度列表 -->
		<view class="progress-list">
			<view class="progress-item" v-for="(item,index) in AcceptanceContent" :key="index">
				<view class="progress-item-head">
					<view class="progress-item-head-box">
						<view class="dot-container">
							<view class="dot dot-blue"></view>
							<view class="vertical-line"></view>
						</view>
						<text class="step-text">受理完成</text>
					</view>
					<text class="time-text">{{item.createTime||'--'}}</text>
				</view>
				<view class="progress-item-desc">
					<text>{{item.content||'--'}}</text>
				</view>
			</view>
			<view class="progress-item">
				<view class="progress-item-head">
					<view class="progress-item-head-box">
						<view class="dot-container">
							<view class="dot dot-gray"></view>
						</view>
						<text class="step-text2">发起举报</text>
					</view>
					<text class="time-text">{{reportContent?.createTime||'--'}}</text>
				</view>
				<view class="progress-item-desc">
					<view><text class="gray-left-text">评论举报：</text> {{reportContent?.content||'--'}}</view>
					<view><text class="gray-left-text">举报理由：</text>{{reportContent?.title||'--'}}</view>
					<view><text class="gray-left-text">举报单号：</text> {{reportContent?.no||'--'}}
						<image :src="`${$ImgBaseUrl}report-copy.png`" mode="" class="copy-icon" @click="copy"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue'
	import {
		reportInfo
	} from '@/api/report.js'; // 导入之前封装的详情接口
	import CustomNavBar from "@/components/custom-navbar/index.vue";

	const AcceptanceContent = ref(null)
	const reportContent = ref({})

	// 在页面加载时获取传递的id参数
	onLoad((options) => {
		// options中包含跳转时传递的所有参数
		const reportId = options.id;

		if (reportId) {
			// 调用接口获取该举报的详细进度信息
			getReportDetails(reportId);
		} else {
			console.error('未获取到举报ID');
		}
	});

	// 复制功能
	const copy = () => {
		if (!reportContent.value?.no) {
			uni.showToast({
				title: '无内容可复制',
				icon: 'none'
			});
			return;
		}

		uni.setClipboardData({
			data: reportContent.value.no.toString(),
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'success'
				});
			},
			fail: () => {
				uni.showToast({
					title: '复制失败',
					icon: 'error'
				});
			}
		});
	};

	// 获取举报详情的方法
	const getReportDetails = async (id) => {
		try {
			const res = await reportInfo(id);
			console.log('举报详情数据:', res);
			if (res.code === 200) {
				AcceptanceContent.value = res.data.dispose || []; // 添加默认值
				reportContent.value = res.data.info || {}; // 确保不会为null
				console.log('处理后的reportContent:', reportContent.value);

				// 计算每个progress-item的高度并设置vertical-line

			} else {
				console.error('API返回非200状态:', res);
			}
		} catch (error) {
			console.error('获取举报详情失败:', error);
			// 可以在这里设置一些默认UI状态
		}
	};
	const goBack = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style scoped lang="scss">
	.report-progress-container {
		background: #F5F5F5;
		height: 100vh;

		.navbar {
			width: 100%;
		}

		.back {
			width: 44rpx;
			height: 44rpx;
			background: rgba(255, 255, 255, 0.6);
			border-radius: 50%;
		}

	}

	.pass-status {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 20%;
		justify-content: center;
	}

	.pass-icon {
		width: 64rpx;
		height: 64rpx;
	}

	.pass-text {
		margin-top: 10px;
		font-size: 34rpx;
		font-weight: 500;
		color: #303133;
	}

	.progress-list {
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		height: 66%;
		padding: 30rpx 20rpx 20rpx 35rpx;
	}

	.progress-item {
		margin-bottom: 20px;
		position: relative;
	}

	.progress-item-head {
		display: flex;
		margin-bottom: 8px;
		flex-direction: column;
		height: 85rpx;
		justify-content: space-between;
	}

	.progress-item-head-box {
		display: flex;
		align-items: center;
	}

	.dot-container {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0rpx 20rpx;
	}

	.dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		position: relative;
		z-index: 2;
	}

	.dot-blue {
		background: linear-gradient(180deg, #5CB7F7 0%, #2F80ED 100%);
	}

	.dot-gray {
		background: #999999;
	}

	.vertical-line {
		position: absolute;
		left: 50%;
		top: 30rpx;
		transform: translateX(-50%);
		width: 2rpx;
		/* 初始高度，会被JavaScript覆盖 */
		height: 100px;
		background-color: #999999;
		z-index: 1;
	}

	.step-text {
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
	}

	.step-text2 {
		font-size: 30rpx;
		color: #999;
		font-weight: 500;
	}

	.time-text {
		font-weight: 400;
		font-size: 24rpx;
		color: #999;
		margin-left: 48rpx;
	}

	.progress-item-desc {
		font-size: 28rpx;
		color: #333;
		font-weight: 400;
		line-height: 2;
		margin-left: 48rpx;
		background: #F1F1F1;
		border-radius: 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.gray-left-text {
			color: #999999;
		}
	}

	.copy-icon {
		width: 24rpx;
		height: 24rpx;
	}
</style>